<template>
  <section class="content">

    <!-- row -->
    <div class="row">
      <div class="col-md-12">
        <!-- The time line -->
        <ul class="timeline">
          <!-- timeline item -->
          <li>
            <label for="" class="bg-green pull-left nav-info">基本信息</label>

            <div class="timeline-item">

              <h3 class="timeline-header"><a href="#">基本信息</a></h3>

              <div class="timeline-body">
                <form class="form-horizontal">
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label"><sup class="text-red">*</sup> 商品SKU：</label>
                      <div class="">
                        <input type="text" class="form-control col-sm-9" placeholder="长度不超过16位，只能字母或数字">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label"><sup class="text-red">*</sup> 中文名称：</label>
                      <div class="">
                        <input type="text" class="form-control col-sm-9" placeholder="长度不超过100">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label"><sup class="text-red">*</sup> 英文名称：</label>
                      <div class="">
                        <input type="text" class="form-control col-sm-9" placeholder="长度不超过100">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label">商品分类：</label>
                      <div class="">
                        <select class="form-control">
                          <option value="请选择分类">请选择分类</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label">商品图片：</label>
                      <div class="">
                        <div class="hello">
                          <div class="upload">
                            <div class="upload_warp">
                              <div class="upload_warp_left" @click="fileClick">
                                <img src="@/assets/upload.png">
                              </div>
                            </div>
                            <div class="upload_warp_text">
                              选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
                            </div>
                            <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
                            <div class="upload_warp_img" v-show="imgList.length!=0">
                              <div class="upload_warp_img_div" v-for="(item,index) of imgList">
                                <div class="upload_warp_img_div_top">
                                  <div class="upload_warp_img_div_text">
                                    {{item.file.name}}
                                  </div>
                                  <img src="@/assets/del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
                                </div>
                                <img :src="item.file.src">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                  <div class="col-sm-12">
                  <label for="" class="control-label">品牌：</label>
                  <div class="">
                  <select class="form-control">
                  <option value="请选择品牌">请选择品牌</option>
                  </select>
                  </div>
                  </div>
                  </div>

                </form>
              </div>
              <div class="timeline-footer">
                <a class="btn btn-primary btn-xs">Read more</a>
                <a class="btn btn-danger btn-xs">Delete</a>
              </div>
            </div>
          </li>
          <!-- END timeline item -->
          <!-- timeline item -->
          <li>
            <label for="" class="bg-green pull-left nav-info">申报信息</label>

            <div class="timeline-item">

              <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>

              <div class="timeline-body">
                <form class="form-horizontal">
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label"><sup class="text-red">*</sup>申报品名（中文）：</label>
                      <div class="">
                        <input class="form-control" placeholder="长度不超过100">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label"><sup class="text-red">*</sup>申报品名（英文）：</label>
                      <div class="">
                        <input class="form-control" placeholder="长度不超过100">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label">申报价格：</label>
                      <div class="input-group">
                        <input class="form-control" placeholder="保留两位小数点">
                        <span class="input-group-addon">USD</span>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label">申报重量：</label>
                      <div class="input-group">
                        <input class="form-control" placeholder="保留两位小数点">
                        <span class="input-group-addon">g</span>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label"><sup class="text-red">*</sup>申报编码：</label>
                      <div class="">
                        <input class="form-control" placeholder="长度不超过100">
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              <div class="timeline-footer">
                <a class="btn btn-warning btn-flat btn-xs">View comment</a>
              </div>
            </div>
          </li>
          <!-- END timeline item -->
          <!-- timeline item -->
          <li>
            <label for="" class="bg-green pull-left nav-info">重量信息</label>

            <div class="timeline-item">

              <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>

              <div class="timeline-body">
                <form class="form-horizontal">
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label">危险品运输：</label>
                      <div class="checkbox">
                        <label for="checkbox" class="no-padding">
                          <input id="checkbox" type="radio" class="flat-red" name="hazardous"> 无
                        </label>
                        <label for="checkbox1">
                          <input id="checkbox1" type="radio" class="flat-red" name="hazardous"> 液体
                        </label>
                        <label for="checkbox2">
                          <input id="checkbox2" type="radio" class="flat-red" name="hazardous"> 粉末
                        </label>
                        <label for="checkbox3">
                          <input id="checkbox3" type="radio" class="flat-red" name="hazardous"> 带电
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label">尺寸：</label>
                      <div class="input-group">
                        <input class="form-control" placeholder="长">
                        <span class="input-group-addon">cm</span>
                        <input class="form-control" placeholder="宽">
                        <span class="input-group-addon">cm</span>
                        <input class="form-control" placeholder="高">
                        <span class="input-group-addon">cm</span>
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-12">
                      <label for="" class="control-label">重量：</label>
                      <div class="input-group">
                        <input class="form-control" placeholder="">
                        <span class="input-group-addon">g</span>
                      </div>
                    </div>
                  </div>

                  <!--<div class="form-group">-->
                  <!--<div class="col-sm-12">-->
                  <!--<label for="" class="control-label">默认发货仓库：</label>-->
                  <!--<div class="">-->
                  <!--<select class="form-control">-->
                  <!--<option value="请选择仓库">请选择仓库</option>-->
                  <!--</select>-->
                  <!--</div>-->
                  <!--</div>-->
                  <!--</div>-->

                </form>
              </div>
              <div class="timeline-footer text-center">
                <a class="btn btn-info btn-sm m-lr-10" @click="goBanck()">继续添加新商品</a>
                <a class="btn btn-info btn-sm m-lr-10" @click="goBanck()">商品入库</a>
                <a class="btn btn-default btn-sm m-lr-10" @click="goBanck()">关闭</a>
              </div>
            </div>
          </li>
          <!-- END timeline item -->
          <li>
            <i class="fa fa-clock-o bg-gray"></i>
          </li>
        </ul>
      </div>
      <!-- /.col -->
    </div>


  </section>
</template>

<script>
    export default {
        name: "addNextProduct",
      data(){
        return {
          imgList: [],
          size: 0
        }
      },
      methods:{
        goBanck:function () {
          this.$router.go(-1)
        },
        fileClick() {
          document.getElementById('upload_file').click()
        },
        fileChange(el) {
          if (!el.target.files[0].size) return;
          this.fileList(el.target);
          el.target.value = ''
        },
        fileList(fileList) {
          let files = fileList.files;
          for (let i = 0; i < files.length; i++) {
            //判断是否为文件夹
            if (files[i].type != '') {
              this.fileAdd(files[i]);
            } else {
              //文件夹处理
              this.folders(fileList.items[i]);
            }
          }
        },
        //文件夹处理
        folders(files) {
          let _this = this;
          //判断是否为原生file
          if (files.kind) {
            files = files.webkitGetAsEntry();
          }
          files.createReader().readEntries(function (file) {
            for (let i = 0; i < file.length; i++) {
              if (file[i].isFile) {
                _this.foldersAdd(file[i]);
              } else {
                _this.folders(file[i]);
              }
            }
          })
        },
        foldersAdd(entry) {
          let _this = this;
          entry.file(function (file) {
            _this.fileAdd(file)
          })
        },
        fileAdd(file) {
          //总大小
          this.size = this.size + file.size;
          //判断是否为图片文件
          if (file.type.indexOf('image') == -1) {
            file.src = 'wenjian.png';
            this.imgList.push({
              file
            });
          } else {
            let reader = new FileReader();
            reader.vue = this;
            reader.readAsDataURL(file);
            reader.onload = function () {
              file.src = this.result;
              this.vue.imgList.push({
                file
              });
            }
          }
        },
        fileDel(index) {
          this.size = this.size - this.imgList[index].file.size;//总大小
          this.imgList.splice(index, 1);
        },
        bytesToSize(bytes) {
          if (bytes === 0) return '0 B';
          let k = 1000, // or 1024
            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
            i = Math.floor(Math.log(bytes) / Math.log(k));
          return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        }
      }
    }
</script>

<style scoped>

</style>
